<template>
  <div class="userview" v-loading.fullscreen.lock="fullscreenLoading">
    <!-- <UserList></UserList> -->

    <div class="view-panel">
      <el-button-group>
        <el-button icon="plus" @click="vcreateUser"></el-button>
        <el-button icon="upload" @click="vsyncData"></el-button>
        <!-- <el-button icon="delete" @click="vDelUser"></el-button> -->
      </el-button-group>
      <el-button-group>
        <el-input v-model="searchword" class="searchword" placeholder="请输入内容" icon="search" :on-icon-click="handleIconClick"></el-input>
      </el-button-group>
      <el-table :data="userlist" border style="width: 100%" :default-sort="{prop: 'updatedAt', order: 'descending'}" row-class-name="user-list" empty-text="暂无数据">
        <el-table-column prop="pic" label="Portrait" width="90">
          <template scope="scope">
            <img class="table_pic_thumb" v-bind:src="scope.row.pic" />
          </template>
        </el-table-column>
        <el-table-column prop="group" label="分组" width="90" :filters="[{ text: 'hero', value: 'hero' }, { text: 'peri', value: 'peri' }]" :filter-method="(value, row)=>{return row.group === value;}">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="120">
        </el-table-column>
        <el-table-column prop="rate" label="评分" width="170" sortable>
          <template scope="scope">
            <el-rate v-model="scope.row.rate" disabled text-color="#ff9900">
            </el-rate>
          </template>
        </el-table-column>
        <el-table-column prop="nickname" label="昵称" width="120">
        </el-table-column>
        <el-table-column prop="birthday" label="生日" width="120" :formatter="dateFormat" sortable>
        </el-table-column>
        <el-table-column prop="hip" label="力量" sortable width="90">
        </el-table-column>
        <el-table-column prop="bust" label="智力" width="90" sortable>
        </el-table-column>
        <el-table-column prop="waist" label="敏捷" width="90" sortable>
        </el-table-column>
        <el-table-column prop="sex" label="性别" width="80">
          <template scope="scope">
            <div v-if="scope.row.sex === 'm'"> 男</div>
            <div v-else-if="scope.row.sex === 'w'">女 </div>
            <div v-else-if="scope.row.sex === 'o'">未知 </div>
            <div v-else> 鬼 </div>
          </template>
        </el-table-column>
        <el-table-column prop="updatedAt" label="最后更新时间" width="150" :formatter="dateFormat" formatterRule="sf">
        </el-table-column>
        <el-table-column prop="description" label="简介">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template scope="scope">
            <el-button type="text" size="small" @click="veditUser(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="vDelUser(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog title="个人信息" :visible.sync="dialogVisible" size="small" top='5%'>
        <User ref="userControl"></User>

        <span slot="footer" class="dialog-footer">
          <hr/>
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="vSaveUser">确 定</el-button>
        </span>
      </el-dialog>

    </div>
  </div>
</template>

<script>
import { mapActions, mapMutations, mapState } from 'vuex';
import User from '@/components/widget/User';
import moment from 'moment';

export default {
  name: 'userview',
  data() {
    return {
      searchword: '',
      dialogVisible: false,
    };
  },
  methods: {
    vsyncData() {
      this.$message('同步成功。');
    },
    vcreateUser() {
      this.CreateUser();
      this.dialogVisible = true;
    },
    veditUser(user) {
      this.SetUser(user);
      this.dialogVisible = true;
    },
    vSaveUser() {
      this.saveUser().then((msg) => {
        this.dialogVisible = false;
        this.$message(msg.errMsg);
      });
    },
    vDelUser(user) {
      this.$confirm('将删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.delUser(user.id).then((msg) => {
          this.$message(msg.errMsg);
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
        });
      });
    },
    dateFormat(row, column) {
      let formater = 'YYYY-MM-DD';
      if (column.property === 'updatedAt') {
        formater = 'YYYY-MM-DD hh:mm';
      }
      const date = row[column.property];
      return moment(date).format(formater);
    },
    handleIconClick() {
      this.queryUserList(this.searchword.trim());
    },
    ...mapActions(['saveUser', 'delUser', 'queryUserList']),
    ...mapMutations(['CreateUser', 'SetUser']),
  },
  mounted() {
    this.queryUserList('');
  },
  computed: {
    ...mapState(['fullscreenLoading', 'userlist']),
  },
  components: {
    User,
  },
};
</script>

<style lang="less">
.userview {
  height: calc(~"100% - 60px");
  display: flex;
  .view-panel {
    width: 100%;
    margin: 10px 10px 0 10px;
    min-width: 400px;
    text-align: left;
    .el-table {
      margin-bottom: 50px;
    }
    .el-button-group {
      margin: 5px 0;
    }
    .table_pic_thumb {
      width: 100%;
    }
    .user-list {
      .cell {
        max-height: 100px;
      }
    }
  }
}
</style>
